<template>
<div id="home">
<!--    顶部导航-->
    <nav-bar class="nav-bar-center">
        <div slot="center">蘑菇街</div>
    </nav-bar>
    <!--    导航栏-->
    <tab-control :title="['流行','新款','精选']" @tabClick="tabClick"
                 ref="tabControl1" v-show="isTabShow" class="tabControl"></tab-control>
   <scroll :probe-type="3" ref="backscroll" @scroll="getPosition"
           :pull-up-load="true" @pullingUp="loadMore" class="home_scroll">
       <!--    轮播图-->
       <swipe :message="swiperImg" class="swipe" @imageLoad="imageLoad"/>
       <!--    推荐-->
       <home-recomend :recomend="recomend" />
       <home-pop-rec />
       <!--    导航栏-->
       <tab-control :title="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl2"></tab-control>
       <!--    商品展示-->
       <goods-list :goodsData="goods[currentType].list"></goods-list>
   </scroll>
<!--    返回顶部标签按钮-->
    <back-top @click.native="backTop" v-show="isShow"></back-top>
</div>
</template>

<script>
    //公共组件
    import NavBar from "../../components/common/navbar/NavBar";
    import Swipe from "../../components/common/swipe/Swipe";
    import TabControl from "../../components/content/tabcontrol/TabControl";
    import GoodsList from "../../components/content/goodslist/GoodsList";
    import BackTop from "../../components/common/BackTop";

    import HomeRecomend from "./childCom/HomeRecomend";
    import HomePopRec from "./childCom/HomePopRec";

    //网络请求
    import {getHomeData,getGoodsData} from "../../network/Home";
    //引入better-scroll框架
    import Scroll from "../../components/common/scroll/Scroll";
    export default {
        name: "Home",
        components: {
            Scroll,
            NavBar,
            Swipe,
            TabControl,
            GoodsList,
            BackTop,
            HomeRecomend,
            HomePopRec,
        },
        data() {
            return {
                swiperImg: [], //轮播图片
                recomend: [], //推荐图片
                goods: {
                    'pop': {page: 0, list: []},
                    'new': {page: 0, list: []},
                    'sell': {page: 0, list: []}
                },
                currentType: 'pop',
                isShow: false,
                isTabShow: false,
                tabOffSetTop: 0,
                saveY: 0
            }
        },
        methods: {
            //切换商品数据
            tabClick(index) {
                switch (index) {
                    case 0 :
                        this.currentType = 'pop';
                        break;
                    case 1 :
                        this.currentType = 'new';
                        break;
                    case 2 :
                        this.currentType = 'sell';
                        break
                }
                this.$refs.tabControl1.currentindex = index;
                this.$refs.tabControl2.currentindex = index
            },
            //获取轮播图、推荐图片
            getHomeDataM() {
                getHomeData().then(res => {
                    // console.log(res.data);
                    this.swiperImg = res.data.data.banner.list;
                    // console.log(this.swiperImg);
                    this.recomend = res.data.data.recommend.list
                });
            },
            //获取商品数据
            getGoodsDataM(type) {
                const page = this.goods[type].page + 1;
                getGoodsData(type, page).then(res => {
                    // console.log(res.data.data.list);
                    this.goods[type].list.push(...[res.data.data.list]);
                    // console.log(this.goods[type].list);
                    this.goods[type].page += 1;
                    this.$refs.backscroll.finishPullUp()
                })
            },
            //上拉加载
            loadMore() {
                this.getGoodsDataM(this.currentType)
            },
            //返回顶部按钮
            backTop() {
                this.$refs.backscroll.scrollTo(0, 0, 200)
            },
            getPosition(position) {
                //监听返回顶部按钮位置
                this.isShow = -(position.y) > 800;
                //监听控制栏位置
                this.isTabShow = -(position.y) > this.tabOffSetTop + 44
            },
            imageLoad() {
                this.tabOffSetTop = this.$refs.tabControl2.$el.offsetTop;
                // console.log(this.$refs.tabControl2.$el.offsetTop);
            }
        },
        created() {
            this.getHomeDataM();
            this.getGoodsDataM('pop');
            this.getGoodsDataM('new');
            this.getGoodsDataM('sell')
        },
        activated() {
            this.$refs.backscroll.scroll.refresh();
            this.$refs.backscroll.scroll.scrollTo(0,this.saveY,0);
        },
        deactivated() {
            this.saveY = this.$refs.backscroll.scroll.y;
        }
    }
</script>

<style scoped>
#home{
        margin-top: 44px;
    }
.nav-bar-center{
    background-color: lightcoral;
    color: #f6f6f6;
}
.home_scroll{
    height: calc(100vh - 93px);
}
.tabControl{
    position: fixed;
    top: 44px;
    z-index:9;
}
</style>
